<template>
    <el-container style="height: 100%; overflow: hidden">
        <el-header
            style="text-align: right; font-size: 12px; height: 10%; color: white"
        >
            <div style="float: left; margin-top: 10px; text-align: center;">
                <span>
                    <img
                        src="../../assets/img/crm_logo.png"
                        alt="logo"
                        srcset=""
                        style="border-radius: 20px; height: 50px;"
                    />
                </span>
                <span style="font-weight: bold; font-size: 25px;">客户管理系统</span>
            </div>
            <div>
                <span>当前时间: {{ curTime }}</span>
                <span style="margin-left: 20px">您好: {{ name }}</span>
                <span style="margin-left: 20px">
                    <el-dropdown>
                        <i class="el-icon-setting" style="margin-right: 15px; color: white"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="handleAttentionWx">微信号二维码</el-dropdown-item>
                            <el-dropdown-item @click.native="handleLoginOut">退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </span>

            </div>
        </el-header>
        <el-container style="height: 80%">
            <el-aside width="200px">
                <el-menu
                    router
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color="#202b2f"
                    text-color="white"
                    active-text-color="#409eff"
                    style="height: 100%"
                    :unique-opened="true"
                    :default-active="this.$route.path"
                >
                    <el-submenu  v-for="menu in menus" :index="menu.parent.id.toString()" :key="menu.parent.id">
                        <template slot="title">
                            <i :class="menu.parent.class_icon"></i>
                            <span>{{ menu.parent.name }}</span>
                        </template>
                        <el-menu-item v-for="children in menu.children" :index="children.url" :key="children.id">{{ children.name }}</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-main>
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>
    </el-container>
</template>

<script>
    import {getDatetime} from "@/utils/time.js";

    export default {
        name: "Home",
        data() {
            return {
                name: this.COOKIE.get("name"),
                curTime: '',
                timer: null,
                // wxImg: require('@/assets/img/wx_test.png'), // 测试微信号二维码
                // wxImg: require('@/assets/img/wx_production.jpg'), // 正式环境我的微信号二维码
                wxImg: require('@/assets/img/wx_shengjia.jpg'), // 盛嘉装饰的微信号二维码
                menus: [],
            };
        },
        methods: {
            handleLoginOut() {
                // 删除 cookie
                this.COOKIE.remove("is_login");
                this.COOKIE.remove("token");
                this.COOKIE.remove("uid");
                this.COOKIE.remove("name");
                this.COOKIE.remove("role_id");
                this.$router.push({path: "/login"});
            },
            handleOpen(key, keyPath) {
                // console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
            },
            handleInitTime() {
                let _this = this;
                this.timer = setInterval(function () {
                    _this.curTime = getDatetime();
                }, 1000);
            },
            handleInitData() {
                let roleId = this.COOKIE.get("role_id");
                let curThis = this;
                this.AXIOS.get(`/api/user/getMenus/${roleId}`)
                    .then(resp => {
                        // console.log(resp.data.data)
                        curThis.menus = resp.data.data;
                    })
                    .catch(err => {
                        this.$message({"type": "error", "message": err})
                    })
            },
            // 弹窗微信号二维码
            handleAttentionWx() {
                this.$notify({
                    title: '微信订阅号二维码',
                    dangerouslyUseHTMLString: true,
                    duration: 5000,
                    type: 'success',
                    message: `<img src="${this.wxImg}" style="width: 200px" alt="二维码">`
                });
            }
        },
        mounted() {
            this.handleInitData();
            this.handleInitTime();
        },
        beforeDestroy() {
            clearInterval(this.timer);
            this.timer = null;
        }
    };
</script>

<style>
    .el-header,
    .el-footer {
        background-color: #212121;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #202b2f;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #e9eef3;
        color: #333;
        /* text-align: center; */
        line-height: 20px !important;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }


</style>
